<div [dMovable]="true" [handle]="header" [moveEl]="parent">
  <div class="modal-header" #header>
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="22">
        {{ 'app.common.operate.edit.title' | translate: data.title }}
      </d-col>
      <d-col [dSpan]="2" style="text-align: right">
        <d-button
          icon="icon-close"
          bsStyle="text-dark"
          title="{{ 'app.common.operate.close.label' | translate }}"
          (btnClick)="data.onClose()"
        ></d-button>
      </d-col>
    </d-row>
  </div>
  <form dForm ngForm [layout]="formLayout" [dValidateRules]="formConfig.rule" #form="dValidateRules" (dSubmit)="submitForm($event)">
    <div class="modal-body" style="padding: 0px 48px 0px 48px">
      <d-row [dGutter]="[12, 12]">
        <d-col [dSpan]="12">
          <d-form-item>
            <d-form-label [required]="true">{{ 'admin.userName' | translate }}</d-form-label>
            <d-form-control>
              <input
                dTextInput
                name="userName"
                [(ngModel)]="formData.userName"
                [dValidateRules]="formConfig.userNameRules"
                [disabled]="true"
              />
            </d-form-control>
          </d-form-item>
        </d-col>
        <d-col [dSpan]="12">
          <d-form-item>
            <d-form-label [required]="true">{{ 'admin.email' | translate }}</d-form-label>
            <d-form-control>
              <input dTextInput name="email" [(ngModel)]="formData.email" [dValidateRules]="formConfig.emailRules" [disabled]="true" />
            </d-form-control>
          </d-form-item>
        </d-col>
      </d-row>
      <d-row [dGutter]="[12, 12]">
        <d-col [dSpan]="12">
          <d-form-item>
            <d-form-label>{{ 'admin.nickName' | translate }}</d-form-label>
            <d-form-control>
              <input dTextInput name="nickName" [(ngModel)]="formData.nickName" [dValidateRules]="formConfig.nickNameRules" />
            </d-form-control>
          </d-form-item>
        </d-col>
        <d-col [dSpan]="12">
          <d-form-item>
            <d-form-label>{{ 'admin.realName' | translate }}</d-form-label>
            <d-form-control>
              <input dTextInput name="realName" [(ngModel)]="formData.realName" [dValidateRules]="formConfig.realNameRules" />
            </d-form-control>
          </d-form-item>
        </d-col>
      </d-row>
      <d-row [dGutter]="[12, 12]">
        <d-col [dSpan]="12">
          <d-form-item>
            <d-form-label>{{ 'admin.mobilePhone' | translate }}</d-form-label>
            <d-form-control>
              <input dTextInput name="mobilePhone" [(ngModel)]="formData.mobilePhone" [dValidateRules]="formConfig.mobilePhoneRules" />
            </d-form-control>
          </d-form-item>
        </d-col>
        <d-col [dSpan]="12">
          <d-form-item>
            <d-form-label>{{ 'admin.gender' | translate }}</d-form-label>
            <d-form-control>
              <d-select
                [options]="genderList"
                name="gender"
                [filterKey]="'label'"
                [(ngModel)]="formData.gender"
                [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
              >
                <ng-template let-option="option"> {{ option['value'] + '-' + option['label'] }} </ng-template>
              </d-select>
            </d-form-control>
          </d-form-item>
        </d-col>
      </d-row>
      <d-row [dGutter]="[12, 12]">
        <d-col [dSpan]="12">
          <d-form-item>
            <d-form-label>{{ 'admin.idCardType' | translate }}</d-form-label>
            <d-form-control>
              <d-select
                [options]="idCardTypeList"
                name="idCardType"
                [filterKey]="'label'"
                [(ngModel)]="formData.idCardType"
                [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
              >
                <ng-template let-option="option"> {{ option['value'] + '-' + option['label'] }} </ng-template>
              </d-select>
            </d-form-control>
          </d-form-item>
        </d-col>
        <d-col [dSpan]="12">
          <d-form-item>
            <d-form-label>{{ 'admin.idCardNo' | translate }}</d-form-label>
            <d-form-control>
              <input dTextInput name="idCardNo" [(ngModel)]="formData.idCardNo" [dValidateRules]="formConfig.idCardNoRules" />
            </d-form-control>
          </d-form-item>
        </d-col>
      </d-row>
      <d-row [dGutter]="[12, 12]">
        <d-col [dSpan]="12">
          <d-form-item>
            <d-form-label>{{ 'admin.nation' | translate }}</d-form-label>
            <d-form-control>
              <d-select
                [options]="nationList"
                name="nation"
                [filterKey]="'label'"
                [(ngModel)]="formData.nation"
                [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
              >
                <ng-template let-option="option"> {{ option['value'] + '-' + option['label'] }} </ng-template>
              </d-select>
            </d-form-control>
          </d-form-item>
        </d-col>
        <d-col [dSpan]="12">
          <d-form-item>
            <d-form-label>{{ 'admin.birthday' | translate }}</d-form-label>
            <d-form-control>
              <div class="devui-input-group devui-dropdown-origin" style="width: 290px">
                <input
                  class="devui-input devui-form-control"
                  dDatepicker
                  #birthdayDp="datepicker"
                  (click)="birthdayDp.toggle()"
                  name="birthday"
                  [(ngModel)]="formData.birthday"
                  dateFormat="y-MM-dd"
                  mode="date"
                />
                <div *ngIf="formData.birthday" class="devui-input-group-addon close-icon-wrapper" (click)="birthdayDp.clearAll()">
                  <em class="icon icon-close"></em>
                </div>
                <div class="devui-input-group-addon" (click)="birthdayDp.toggle()">
                  <em class="icon icon-calendar"></em>
                </div>
              </div>
            </d-form-control>
          </d-form-item>
        </d-col>
      </d-row>
      <d-row [dGutter]="[12, 12]">
        <d-col [dSpan]="12">
          <d-form-item>
            <d-form-label>{{ 'admin.qq' | translate }}</d-form-label>
            <d-form-control>
              <input dTextInput name="qq" [(ngModel)]="formData.qq" [dValidateRules]="formConfig.qqRules" />
            </d-form-control>
          </d-form-item>
        </d-col>
        <d-col [dSpan]="12">
          <d-form-item>
            <d-form-label>{{ 'admin.wechat' | translate }}</d-form-label>
            <d-form-control>
              <input dTextInput name="wechat" [(ngModel)]="formData.wechat" [dValidateRules]="formConfig.wechatRules" />
            </d-form-control>
          </d-form-item>
        </d-col>
      </d-row>
      <d-row [dGutter]="[12, 12]">
        <d-col [dSpan]="24">
          <d-form-item>
            <d-form-label>{{ 'admin.summary' | translate }}</d-form-label>
            <d-form-control>
              <textarea dTextarea name="summary" [(ngModel)]="formData.summary" [dValidateRules]="formConfig.summaryRules"></textarea>
            </d-form-control>
          </d-form-item>
        </d-col>
      </d-row>
    </div>
    <div class="modal-footer" style="text-align: right; padding-right: 48px">
      <d-form-operation>
        <d-button style="margin-right: 4px" bsStyle="common" (btnClick)="data.onClose($event)">{{
          'app.common.operate.cancel.label' | translate
        }}</d-button>
        <d-button bsStyle="primary" dFormSubmit>{{ 'app.common.operate.confirm.label' | translate }}</d-button>
      </d-form-operation>
    </div>
  </form>
</div>
